<!DOCTYPE html>
{extend name="common/application" /}
{block name="title"}<title>个人中心-实名认证-个人</title>{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="_CSS_/help.css" />
<link rel="stylesheet" type="text/css" href="_CSS_/personal.css"/>
<link rel="stylesheet" type="text/css" href="_CSS_/cefi.css"/>
<style type="text/css">
	.hide{display: none !important;}
	.upload-btn,.file-panel,.del_cancel{width: 200px;height: 200px;}
</style>
		{/block}
		<!-- 主体内容 -->
		{block name="content"}
			<!-- 主体内容 -->
			<div class="main">
				<div class="mainBody normalBox clearfix">
					<!--左菜单-->
					<ul class="menuList fl">
						<li class="showChild">
							<a class="menuItem dropBg" href="personal.html"><span class="icons icon-account"></span>账户管理</a>
							<div class="childMenu">
								<a class="menuchildItem" href="personal.html">个人资料</a>
								<a class="menuchildItem activeMenu" href="certification.html">实名认证</a>
								<a class="menuchildItem" href="account.html">账户安全</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="order.html"><span class="icons icon-order"></span>我的订单</a>
							<div class="childMenu">
								<a class="menuchildItem" href="order.html">我的订单</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="collect_news.html"><span class="icons icon-collection"></span>我的收藏</a>
							<div class="childMenu">
								<a class="menuchildItem" href="collect_news.html">资讯收藏</a>
								<a class="menuchildItem" href="collect_course.html">课程收藏</a>
								<a class="menuchildItem" href="collect_products.html">商品收藏</a>
								<a class="menuchildItem" href="collect_stores.html">店铺收藏</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="address.html"><span class="icons icon-address"></span>地址管理</a>
							<div class="childMenu">
								<a class="menuchildItem" href="address.html">地址管理</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="judge.html"><span class="icons icon-evaluate"></span>评价管理</a>
							<div class="childMenu">
								<a class="menuchildItem" href="judge.html">评价管理</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="complain.html"><span class="icons icon-price"></span>申述退款</a>
							<div class="childMenu">
								<a class="menuchildItem" href="complain.html">申述</a>
								<a class="menuchildItem" href="refund_money.html">退款</a>
							</div>
						</li>
						<li class="bb0">
							<a class="menuItem dropBg" href="message.html"><span class="icons icon-news"></span>消息中心</a>
							<div class="childMenu">
								<a class="menuchildItem" href="message.html">消息中心</a>
							</div>
						</li>
					</ul>
					<!--右内容-->
					<div class="menuContent fr">
						<div class="menuConHeader">
							<!--面包屑导航-->
							<div class="breadcrumb">
								<p>当前位置：
									<a href="personal.html">账户管理</a> &gt;
									<a href="certification.html">实名认证</a> &gt;
									<a class="curPage" href="javascript:;">个人认证</a>
								</p>
							</div>
						</div>
						<div class="menuConBody">
							<!--表单提交-->
							<form id="form1" action="" method="post" class='forms hide'>
								<div class='form-group'>
									<label>姓名：</label>
									<input class='form-control name' name="nick" type='text' placeholder="请输入您的姓名"/>
								</div>
								<div class='form-group'>
									<label>手机号码：</label>
									<input type="text" class="form-control phone" name="phone" placeholder="请输入您的手机号码">
								</div>
								<div class='form-group'>
									<label>支付宝绑定：</label>
									<input type="text" class="form-control alipay" name="alipay" placeholder="请输入您的支付宝账户">
									<p class="tips">注：请确保该账户在支付宝登记的实名(负责人名称)与收款方真实姓名一致。如未实名，则单日最多只能收款1000元。</p>
								</div>
								<div class='form-group'>
									<label>身份证：</label>
									<input disabled="disabled" type="text" class="form-control idcard">
								</div>
								<div class='form-group'>
									<label>证件有效期：</label>
									<input disabled="disabled" type="text" class="form-control demo-input" id="test1">
								</div>
								<div class='form-group'>
									<label>证件图片：</label>
									<div class="upload-img file">
										<div class="upload-btn">
											<img src="_IMG_/upload.png">
											<input type="file" name="face" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png">
										</div>
									</div>
									<div class="upload-img file">
										<div class="upload-btn">
											<img src="_IMG_/upload.png">
											<input type="file" name="back" id="file1" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png">
										</div>
									</div>
									<p class="tips">注：仅支持JPG,PNG,JEPG格式，身份证照片要求四边可见，画面清晰，每张小于2MB。</p>
								</div>
								<div class='form-group'>
									<label>示例：</label>
									<img src="_IMG_/a03.png"/>
									<img src="_IMG_/a04.png"/>
								</div>
								<input type="button" class="submitBtn" name="" value="提交"/>
								<a class="prevstep btns hide" href="javascript:;">上一步</a>
								<a class="sendAgain btns hide" href="javascript:;">重新提交</a>
								<p class="tips">注：请确认提交的资料是否有误，提交后不可修改！</p>
							</form>
							<!--审核状态-->
							<div class="checkStatus hide">
								<!--审核中-->
								<div class="checkDuring hide">
									<img src="_IMG_/checking.png"/>
									<p>实名认证正在审核中，请稍后再查看</p>
								</div>
								<!--审核成功-->
								<div class="checkSuccess hide">
									<p><span class="icons icon-status-success"></span>实名认证已通过，以下内容即为认证信息</p>
									<form id="form2" action="" method="post" class='forms'>
										<div class='form-group'>
											<label>姓名：</label>
											<span id="nick"></span>
										</div>
										<div class='form-group'>
											<label>手机号码：</label>
											<span id="phone"></span>
										</div>
										<div class='form-group'>
											<label>支付宝绑定：</label>
											<span id="alipay"></span>
										</div>
										<div class='form-group'>
											<label>身份证：</label>
											<span id="card"></span>
										</div>
										<div class='form-group'>
											<label>证件有效期：</label>
											<span id="date"></span>
										</div>
										<div class='form-group' id="img">
											<label>证件图片：</label>
											<img height="200px" src="_IMG_/4.png"/>
											<img height="200px" src="_IMG_/5.png"/>
										</div>
									</form>
								</div>
								<!--审核失败-->
								<div class="checkFailed" num="">
									<p><span class="icons icon-status-failed"></span><span id="result"></span></p>
									<form id="form3" action="" method="post" class='forms'>
										<div class='form-group'>
											<label>姓名：</label>
											<span></span>
										</div>
										<div class='form-group'>
											<label>手机号码：</label>
											<span></span>
										</div>
										<div class='form-group'>
											<label>支付宝绑定：</label>
											<span></span>
										</div>
										<div class='form-group'>
											<label>身份证：</label>
											<span></span>
										</div>
										<div class='form-group'>
											<label>证件有效期：</label>
											<span></span>
										</div>
										<div class='form-group' id="img2">
											<label>证件图片：</label>
											<img height="200px" src="_IMG_/4.png"/>
											<img height="200px" src="_IMG_/5.png"/>
										</div>
									</form>
									<a class="editBtn" href="javascript:;">修改</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		{/block}



		{block name="js"}

		<script src="_P_/laydate/laydate.js"></script>
<script src="_P_/layer/layer.js"></script>
		<script type="text/javascript">
		/*
     *   功能:实现VBScript的DateAdd功能.
     *   参数:interval,字符串表达式，表示要添加的时间间隔.
     *   参数:number,数值表达式，表示要添加的时间间隔的个数.
     *   参数:date,时间对象.
     *   返回:新的时间对象.
     *   var now = new Date();
     *   var newDate = DateAdd( "d", 5, now);
     *---------------   DateAdd(interval,number,date)   -----------------
     */
    function DateAdd(interval, number, date) {
        switch (interval) {
            case "y ": {
                date.setFullYear(date.getFullYear() + number);
                return date;
                break;
            }
            case "q ": {
                date.setMonth(date.getMonth() + number * 3);
                return date;
                break;
            }
            case "m ": {
                date.setMonth(date.getMonth() + number);
                return date;
                break;
            }
            case "w ": {
                date.setDate(date.getDate() + number * 7);
                return date;
                break;
            }
            case "d ": {
                date.setDate(date.getDate() + number);
                return date;
                break;
            }
            case "h ": {
                date.setHours(date.getHours() + number);
                return date;
                break;
            }
            case "m ": {
                date.setMinutes(date.getMinutes() + number);
                return date;
                break;
            }
            case "s ": {
                date.setSeconds(date.getSeconds() + number);
                return date;
                break;
            }
            default: {
                date.setDate(d.getDate() + number);
                return date;
                break;
            }
        }
    }
			$(document).ready(function(){
				//执行一个laydate实例
				laydate.render({
				  elem: '#test1' //指定元素
				});
				var userinfo=$.cookie('userinfo');
				if(userinfo) {
					var user_login = $.base64.decode(userinfo).split(",");
					var uid = user_login[0];
					get_personal(uid);
					//添加认证
					$('.submitBtn').on('click',function(){
						var name=$('#form1').find('.name').val();
						var phone=$('#form1').find('.phone').val();
						var alipay=$('#form1').find('.alipay').val();
						var idcard=$('#form1').find('.idcard').val();
						var date=$('#form1').find('#test1').val();
						var pic1=$('#form1').find('input[name="face"]').val();
						var pic2=$('#form1').find('input[name="back"]').val();
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if(!myreg.test(phone)) {
							layer.msg('手机号码格式不正确！', {icon: 5});
							return false;
						}
						var show=/^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)$/;
						if(!show.test(idcard)) {
							layer.msg('身份证格式不正确！', {icon: 5});
							return false;
						}
						if(!name||!phone||!alipay||!idcard||!date||!pic1||!pic2){
							layer.msg('请填写完整！', {icon: 5});
							return false;
						}
						var date1 = new Date(date.replace(/-/g, "/"));
						var now = new Date();
						var newDate = DateAdd("y ", 1, now);
						var date2 = new Date(newDate.toLocaleDateString());
						if (date1 < date2) {
							layer.msg('证件有效期必须大于入驻时间1年', {icon: 5});
							return false;
						}
						var formData = new FormData($('#form1')[0]);
						formData.append('uid', uid);
						formData.append('idcard', idcard);
						formData.append('date', date);
						$.ajax({
							type: "post",
							url: "/index.php/api/form/examine_add",
							data:formData,
							dataType: 'json',
							beforeSend: function () {
							var index = layer.load(1, {
								shade: [0.1, '#333333'] //0.1透明度的白色背景
							});
							},
							success: function (msg) {
								layer.closeAll();

								if (msg.code == 200) {
									//layer.close(index); //如果设定了yes回调，需进行手工关闭
									get_personal(uid);
								}else{
									layer.msg(msg.message, {icon: 5});
								}
							},
							contentType: false, //必须false才会自动加上正确的Content-Type
							processData: false //必须false才会避开jQuery对 formdata 的默认处理
						});
					});
					//上一步
					$('.prevstep').on('click',function(){
						//get_personal(uid);
						$('#form1').addClass('hide');
						$('.checkStatus').removeClass('hide');
						$('.checkDuring').addClass('hide');
						$('.checkSuccess').addClass('hide');
						$('.checkFailed').removeClass('hide');
						$('.submitBtn').addClass('hide');
					});
					/*修改*/
					$('.editBtn').on('click',function(){
						$.ajax({
							type: "get",
							url: "/index.php/api/form/examine_personal",
							data: {
								'uid': uid
							},
							dataType: 'jsonp',
							beforeSend: function () {
							var index = layer.load(1, {
								shade: [0.1, '#333333'] //0.1透明度的白色背景
							});
							},
							success: function (msg) {
								layer.closeAll();
								if (msg.code == 200) {
									if(msg.data.static==3){
										$('.checkStatus').addClass('hide');
										$('#form1').removeClass('hide');
										$('.submitBtn').hide();
										$('.prevstep').removeClass('hide');
										$('.sendAgain').removeClass('hide');
										$('.checkFailed').addClass('hide');
										$('.name').val(msg.data.nick);
										$('.phone').val(msg.data.phone);
										$('.alipay').val(msg.data.alipay);
										$('.idcard').val(msg.data.card);
										$('#test1').val(msg.data.validity_time);
//										$('#form3').find('div').eq(5).find('img').eq(0).attr('src','/Images/authentication/'+msg.data.positive_image);
//										$('#form3').find('div').eq(5).find('img').eq(0).attr('layer-src','/Images/authentication/'+msg.data.positive_image);
//										$('#form3').find('div').eq(5).find('img').eq(1).attr('src','/Images/authentication/'+msg.data.reverse_image);
//										$('#form3').find('div').eq(5).find('img').eq(1).attr('layer-src','/Images/authentication/'+msg.data.reverse_image);
//										layer.photos({
//											photos: '#img2'
//											,anim: 5 ,//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
//											area: ['600','500px'],
//											closeBtn: 1
//										});
									}
								}
								if (msg.code == 1000) {
									layer.msg('网络错误！', {icon: 51});
								}
							}
						});

					});
					/*重新提交*/
					$('.sendAgain').on('click',function(){
						var name=$('#form1').find('.name').val();
						var phone=$('#form1').find('.phone').val();
						var alipay=$('#form1').find('.alipay').val();
						var idcard=$('#form1').find('.idcard').val();
						var date=$('#form1').find('#test1').val();
						var pic1=$('#form1').find('input[name="face"]').val();
						var pic2=$('#form1').find('input[name="back"]').val();
						var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if(!myreg.test(phone)) {
							layer.msg('手机号码格式不正确！', {icon: 5});
							return false;
						}
						var show=/^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)$/;
						if(!show.test(idcard)) {
							layer.msg('身份证格式不正确！', {icon: 5});
							return false;
						}
						if(!name||!phone||!alipay||!idcard||!date||!pic1||!pic2){
							layer.msg('请填写完整！', {icon: 5});
							return false;
						}
						var date1 = new Date(date.replace(/-/g, "/"));
						var now = new Date();
						var newDate = DateAdd("y ", 1, now);
						var date2 = new Date(newDate.toLocaleDateString());
						if (date1 < date2) {
							layer.msg('证件有效期必须大于入驻时间1年', {icon: 5});
							return false;
						}
						var formData = new FormData($('#form1')[0]);
						formData.append('uid', uid);
						formData.append('idcard', idcard);
						formData.append('date', date);
						$.ajax({
							type: "post",
							url: "/index.php/api/form/examine_edit",
							data:formData,
							dataType: 'json',
							beforeSend: function () {
							var index = layer.load(1, {
								shade: [0.1, '#333333'] //0.1透明度的白色背景
							});
							},
							success: function (msg) {
								layer.closeAll();

								if (msg.code == 200) {
									//layer.close(index); //如果设定了yes回调，需进行手工关闭
									get_personal(uid);
								}
								if (msg.code == 1000) {
									layer.msg('添加失败！', {icon: 5});
								}
							},
							contentType: false, //必须false才会自动加上正确的Content-Type
							processData: false //必须false才会避开jQuery对 formdata 的默认处理
						});
					});
				}else{
					layer.msg('还未登录！', {icon: 51});
				}


			});
			/*限制图标上传大小*/
			/*function validate_img(ele){
				var file = ele.value;
			 	if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){       
					alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
					return false;         
				}else{
					if(((ele.files[0].size).toFixed(2))>=(2*1024*1024)){       
						alert("请上传小于2M的图片");
						return false;
			      	}
			  	}
			}*/
			/**获取认证信息*/
			function get_personal(uid){
				$.ajax({
					type: "get",
					url: "/index.php/api/form/examine_personal",
					data: {
						'uid': uid
					},
					dataType: 'jsonp',
					success: function (msg) {
						if (msg.code == 200) {
							if(msg.data.static==1){
								$('#form1').addClass('hide');
								$('.checkStatus').removeClass('hide');
								$('.checkDuring').removeClass('hide');
								$('.checkSuccess').addClass('hide');
								$('.checkFailed').addClass('hide');
								$('.submitBtn').removeClass('hide');
							}
							if(msg.data.static==2){
								$('#form1').addClass('hide');
								$('.checkStatus').removeClass('hide');
								$('.checkDuring').addClass('hide');
								$('.checkSuccess').removeClass('hide');
								$('.checkFailed').addClass('hide');
								$('.submitBtn').addClass('hide');
								$('#nick').html(msg.data.nick);
								$('#card').html(msg.data.card);
								$('#alipay').html(msg.data.alipay);
								$('#phone').html(msg.data.phone);
								$('#date').html(msg.data.validity_time);
								$('#img').find('img').eq(0).attr('src','/Images/authentication/'+msg.data.positive_image);
								$('#img').find('img').eq(0).attr('layer-src','/Images/authentication/'+msg.data.positive_image);
								$('#img').find('img').eq(1).attr('src','/Images/authentication/'+msg.data.reverse_image);
								$('#img').find('img').eq(1).attr('layer-src','/Images/authentication/'+msg.data.reverse_image);
								layer.photos({
									photos: '#img'
									,anim: 5 ,//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
									area: ['600','500px'],
									closeBtn: 1
								});
							}
							if(msg.data.static==3){
								$('#form1').addClass('hide');
								$('.checkStatus').removeClass('hide');
								$('.checkDuring').addClass('hide');
								$('.checkSuccess').addClass('hide');
								$('.checkFailed').removeClass('hide');
								$('.submitBtn').addClass('hide');
								$('#form3').find('div').eq(0).find('span').html(msg.data.nick);
								$('#form3').find('div').eq(1).find('span').html(msg.data.card);
								$('#form3').find('div').eq(2).find('span').html(msg.data.alipay);
								$('#form3').find('div').eq(3).find('span').html(msg.data.phone);
								$('#form3').find('div').eq(4).find('span').html(msg.data.validity_time);
								$('#result').html(msg.data.result);
								$('.checkFailed').attr('num',msg.data.id);
								$('#form3').find('div').eq(5).find('img').eq(0).attr('src','/Images/authentication/'+msg.data.positive_image);
								$('#form3').find('div').eq(5).find('img').eq(0).attr('layer-src','/Images/authentication/'+msg.data.positive_image);
								$('#form3').find('div').eq(5).find('img').eq(1).attr('src','/Images/authentication/'+msg.data.reverse_image);
								$('#form3').find('div').eq(5).find('img').eq(1).attr('layer-src','/Images/authentication/'+msg.data.reverse_image);
								layer.photos({
									photos: '#img2'
									,anim: 5 ,//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
									area: ['600','500px'],
									closeBtn: 1
								});
							}
						}
						if (msg.code == 1000) {
							$('#form1').removeClass('hide');
						}
					}
				});
			}
			function previewImage(obj,num){
				var filepath=$(obj).val();
				fileObj = document.getElementById('file'+num);
				value = window.URL.createObjectURL(fileObj.files[0]);
				file_size = obj.files[0].size;
				size = file_size / 1024;
				if (size > 1024*5) {
					$('#file'+num).val("");
					layer.alert('上传图片不得大于5MB', {
						closeBtn: 0
					});
				} else {
					$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="display:block;width:10px;height:10px;margin-left:190px;text-align:center;" title="删除" href="javascript:;"></a></div></div></div>');
					$(obj).parent(".upload-btn").hide();
					$(obj).parents(".upload-img").children('p').hide();

					$('.img-info').hover(function(){
						$(this).find(".file-panel").show();
					},function(){
						$(this).find(".file-panel").hide();

					});
					$(".del_cancel a").on("click",function(){
						$('#file'+num).val("");
						$(this).parents('.upload-img').find(".upload-btn").show();
						$(this).parents('.upload-img').find(".upload-img p").show();
						$(this).parents(".img-info").remove();

					});
				}
				if (num == 1) {
					var formData = new FormData($('#form1')[0]);
					formData.append('side', 'back');
					$.ajax({
						type: "post",
						url: "/index.php/api/form/examine_img",
						data: formData,
						dataType: 'json',
						beforeSend: function () {
							var index = layer.load(1, {
								shade: [0.1, '#333333'] //0.1透明度的白色背景
							});
						},
						success: function (msg) {
							layer.closeAll();
							if (msg.code == 200) {
								var str = msg.data.end_date;
								var s1 = str.substring(0, 4);
								var s2 = str.substring(4, 6);
								var s3 = str.substring(6, 8);
								$("#test1").val(s1 + "-" + s2 + "-" + s3);
							} else {
								layer.msg(msg.message, {icon: 5});
							}
						},
						contentType: false, //必须false才会自动加上正确的Content-Type
						processData: false //必须false才会避开jQuery对 formdata 的默认处理
					});
				} else {
					var formData = new FormData($('#form1')[0]);
					formData.append('side', 'face');
					$.ajax({
						type: "post",
						url: "/index.php/api/form/examine_img",
						data: formData,
						dataType: 'json',
						beforeSend: function () {
							var index = layer.load(1, {
								shade: [0.1, '#333333'] //0.1透明度的白色背景
							});
						},
						success: function (msg) {
							layer.closeAll();
							if (msg.code == 200) {
								$('#form1').find(".idcard").val(msg.data.num);
							} else {
								layer.msg(msg.message, {icon: 5});
							}
						},
						contentType: false, //必须false才会自动加上正确的Content-Type
						processData: false //必须false才会避开jQuery对 formdata 的默认处理
					});
				}
			}
		</script>
		{/block}
			